<template>
  <div class="expt-manage">
    <div class="expt-manage-left">
      <!-- 统计 -->
      <statistics></statistics>
      <!-- 实验列表 -->
      <div class="expt-list">
        <div class="head">
          <div class="left">
            <div class="tabs">
              <div
                v-for="(item, index) in exptTabs"
                :key="item.id"
                class="tab-itme"
                :class="{ 'active-tab': exptActiveTab == index }"
                @click="exptTypeClick(index)"
              >
                {{ item.name }}
              </div>
            </div>
            <div class="search">
              <el-select
                allow-create
                clearable
                filterable
                v-model="searchType"
                placeholder="搜索类型"
              >
                <el-option
                  :label="item.name"
                  :value="item.id"
                  v-for="item in searchTypeList"
                  :key="item.id"
                />
              </el-select>
              <el-input
                :disabled="!searchType && searchType != 0"
                v-model="searchInfo"
                class="inp"
              >
              </el-input>
              <el-button
                :icon="Search"
                @click="exptTypeClick(exptActiveTab)"
              ></el-button>
            </div>
          </div>
          <div class="right" @click="addExptClick">新建实验</div>
        </div>
        <div class="card-list">
          <ExptCard
            :exptList="newList"
            @cardClick="cardClick"
            @cardUpdate="cardUpdate"
            @delExpt="delExpt"
          ></ExptCard>
        </div>
      </div>
    </div>

    <ExptManageRight
      :currentTroopsList="currentTroopsList"
      :campList="campList"
      @campTabClick="campTabClick"
    ></ExptManageRight>
    <!-- 新建实验 -->
    <AddExpt
      v-model:addExptDialogVisible="addExptDialogVisible"
      @addExptSave="addExptSave"
      :addExptForm="addExptForm"
    />
  </div>
</template>
<script setup>
import { ElMessage, ElMessageBox } from "element-plus";
import { Search } from "@element-plus/icons-vue";
import statistics from "./components/exptmanage/statistics";
import ExptCard from "./components/exptmanage/ExptCard";
import AddExpt from "./components/exptmanage/AddExpt";
import ExptManageRight from "./components/exptmanage/ExptManageRight";
import { ref, onMounted, onUnmounted, inject } from "vue";
import { useRoute, useRouter } from "vue-router";
import { addExptAPI, getExptListAPI } from "@/api/exptManage";
const router = useRouter();
const props = defineProps({});
let emit = defineEmits([""]);

// 切换
const exptTabs = [
  {
    name: "所有实验",
    id: 0,
  },
  {
    name: "已启动实验",
    id: 1,
  },
  {
    name: "我创建的",
    id: 2,
  },
];
const exptActiveTab = ref(0);
// 搜索类型
const searchType = ref("");

const searchTypeList = [
  {
    name: "实验名称",
    id: 0,
  },
  {
    name: "创建人",
    id: 1,
  },
  {
    name: "实验级别",
    id: 2,
  },
];
const searchInfo = ref("");

// 获取当前登录用户名称或者id
// let currentUser = ref("张三");
let currentUser = ref(sessionStorage.getItem("name"));
// 点击实验类型
var exptId = "";
function handleSearch(searchObj, all) {
  let arr = [...all];
  for (const item in searchObj) {
    arr = arr.filter((row) => {
      return searchObj[item].value ? row[item] == searchObj[item].value : true;
    });
  }
  exptId = arr[0].id;

  sessionStorage.setItem("exptId", exptId);

  return arr;
}

const exptTypeClick = (index) => {
  console.log(currentUser.value);

  exptActiveTab.value = index;

  let type =
    searchType.value === 0
      ? "exptName"
      : searchType.value === 1
      ? "creator"
      : searchType.value === 2
      ? "exptLevel"
      : "";

  let searchObj = {};
  if (index == 0) {
    if (type) {
      searchObj[type] = {
        value: searchInfo.value,
        than: "includes",
      };
    }
  } else if (index == 1) {
    searchObj = {
      status: {
        value: 2,
        than: "includes",
      },
    };
    if (type) {
      searchObj[type] = {
        value: searchInfo.value,
        than: "includes",
      };
    }
  } else if (index == 2) {
    searchObj = {
      creator: {
        value: currentUser.value,
        than: "includes",
      },
    };
    if (type) {
      searchObj[type] = {
        value: searchInfo.value,
        than: "includes",
      };
    }
  }

  newList.value = handleSearch(searchObj, exptList.value);
};
const newList = ref([]);

const exptList = ref([]);
// 获取实验列表
async function getExptList() {
  try {
    let res = await getExptListAPI();
    exptList.value = res.data;
    cardClick(exptList.value[0]);
  } catch (error) {
    console.log(error);
  }

  exptTypeClick(exptActiveTab.value);
}

const troopsList = ref({
  red: [
    {
      name: "卫星",
      id: 1,
      children: [
        {
          name: "电子侦察卫星",
          id: 11,
          pid: 1,
        },
        {
          name: "图像侦察卫星",
          id: 12,
          pid: 1,
        },
        {
          name: "通信卫星",
          id: 13,
          pid: 1,
        },
        {
          name: "导航卫星",
          id: 14,
          pid: 1,
        },
        {
          name: "测绘卫星",
          id: 15,
          pid: 1,
        },
        {
          name: "电子对抗卫星",
          id: 16,
          pid: 1,
        },
      ],
    },
    {
      name: "导弹车",
      id: 2,
      children: [
        {
          name: "导弹车1",
          id: 21,
          pid: 2,
          children: [
            {
              name: "导弹车1",
              id: 21,
              pid: 2,
            },
            {
              name: "导弹车2",
              id: 22,
              pid: 2,
            },
          ],
        },
        {
          name: "导弹车2",
          id: 22,
          pid: 2,
        },
      ],
    },
    {
      name: "飞机",
      id: 3,
      children: [
        {
          name: "飞机1",
          pid: 3,
          id: 31,
        },
        {
          name: "飞机2",
          id: 32,
          pid: 3,
        },
      ],
    },
  ],
  blue: [
    {
      name: "卫星",
      id: 1,
      children: [
        {
          name: "电子侦察卫星",
          id: 11,
          pid: 1,
        },
        {
          name: "图像侦察卫星",
          id: 12,
          pid: 1,
        },
        {
          name: "通信卫星",
          id: 13,
          pid: 1,
        },
        {
          name: "导航卫星",
          id: 14,
          pid: 1,
        },
        {
          name: "测绘卫星",
          id: 15,
          pid: 1,
        },
        {
          name: "电子对抗卫星",
          id: 16,
          pid: 1,
        },
      ],
    },
  ],
});
const troopsList1 = ref([
  {
    id: 10,
    data: [
      {
        name: "卫星",
        id: 1,
        children: [
          {
            name: "电子侦察卫星",
            id: 11,
            pid: 1,
          },
          {
            name: "图像侦察卫星",
            id: 12,
            pid: 1,
          },
          {
            name: "通信卫星",
            id: 13,
            pid: 1,
          },
          {
            name: "导航卫星",
            id: 14,
            pid: 1,
          },
          {
            name: "测绘卫星",
            id: 15,
            pid: 1,
          },
          {
            name: "电子对抗卫星",
            id: 16,
            pid: 1,
          },
        ],
      },
      {
        name: "导弹车",
        id: 2,
        children: [
          {
            name: "导弹车1",
            id: 21,
            pid: 2,
            children: [
              {
                name: "导弹车1",
                id: 21,
                pid: 2,
              },
              {
                name: "导弹车2",
                id: 22,
                pid: 2,
                children: [
                  {
                    name: "刹车",
                    id: 222,
                  },
                ],
              },
            ],
          },
          {
            name: "导弹车2",
            id: 22,
            pid: 2,
          },
        ],
      },
      {
        name: "飞机",
        id: 3,
        children: [
          {
            name: "飞机1",
            pid: 3,
            id: 31,
          },
          {
            name: "飞机2",
            id: 32,
            pid: 3,
          },
        ],
      },
    ],
  },
  {
    id: 20,
    data: [
      {
        name: "卫星",
        id: 1,
        children: [
          {
            name: "电子侦察卫星",
            id: 11,
            pid: 1,
          },
          {
            name: "图像侦察卫星",
            id: 12,
            pid: 1,
          },
          {
            name: "通信卫星",
            id: 13,
            pid: 1,
          },
          {
            name: "导航卫星",
            id: 14,
            pid: 1,
          },
          {
            name: "测绘卫星",
            id: 15,
            pid: 1,
          },
          {
            name: "电子对抗卫星",
            id: 16,
            pid: 1,
          },
        ],
      },
    ],
  },
  {
    id: 33,
    data: [
      {
        name: "卫星",
        id: 1,
        children: [
          {
            name: "电子侦察卫星",
            id: 11,
            pid: 1,
          },
          {
            name: "图像侦察卫星",
            id: 12,
            pid: 1,
          },
          {
            name: "通信卫星",
            id: 13,
            pid: 1,
          },
          {
            name: "导航卫星",
            id: 14,
            pid: 1,
          },
          {
            name: "测绘卫星",
            id: 15,
            pid: 1,
          },
          {
            name: "电子对抗卫星",
            id: 16,
            pid: 1,
          },
        ],
      },
    ],
  },
  {
    id: 20,
    data: [
      {
        name: "卫星",
        id: 1,
        children: [
          {
            name: "电子侦察卫星",
            id: 11,
            pid: 1,
          },
          {
            name: "图像侦察卫星",
            id: 12,
            pid: 1,
          },
          {
            name: "通信卫星",
            id: 13,
            pid: 1,
          },
          {
            name: "导航卫星",
            id: 14,
            pid: 1,
          },
          {
            name: "测绘卫星",
            id: 15,
            pid: 1,
          },
          {
            name: "电子对抗卫星",
            id: 16,
            pid: 1,
          },
        ],
      },
    ],
  },
  {
    id: 44,
    data: [
      {
        name: "卫星",
        id: 1,
        children: [
          {
            name: "电子侦察卫星",
            id: 11,
            pid: 1,
          },
          {
            name: "图像侦察卫星",
            id: 12,
            pid: 1,
          },
          {
            name: "通信卫星",
            id: 13,
            pid: 1,
          },
          {
            name: "导航卫星",
            id: 14,
            pid: 1,
          },
          {
            name: "测绘卫星",
            id: 15,
            pid: 1,
          },
          {
            name: "电子对抗卫星",
            id: 16,
            pid: 1,
          },
        ],
      },
    ],
  },
]);
const campList = ref([]);
const currentTroopsList = ref([]);
// 点击卡片
const cardClick = (item) => {
  console.log(item, "点击卡片");

  currentTroopsList.value = troopsList1.value[0].data;

  campList.value = item.campSettings;
  console.log(campList.value);

  sessionStorage.setItem("exptId", item.id);

  // campList.value = [
  //   {
  //     name: "红方",
  //     id: 1,
  //     color: "red",
  //   },
  //   {
  //     name: "蓝方",
  //     id: 2,
  //     color: "blue",
  //   },

  // ];
};

// 阵营点击切换
const campTabClick = (item) => {
  console.log(troopsList1.value);

  let index = troopsList1.value.findIndex((v) => v.id == item.id);
  console.log(index);
  if (index == -1) return;
  currentTroopsList.value = troopsList1.value[index].data;
};

// 新建实验
const addExptDialogVisible = ref(false);
const addExptClick = () => {
  addExptDialogVisible.value = true;
};
import moment from "moment";
const addExptSave = async () => {
  console.log(addExptForm.value);
  addExptForm.value.creator = sessionStorage.getItem("name");
  addExptForm.value.mySeat = "实验组织席";
  try {
    let res = await addExptAPI(addExptForm.value);
    console.log(res);

    getExptList();
  } catch (error) {
    console.log(error);
  }
};
const addExptForm = ref({});
// 编辑
const cardUpdate = (item) => {
  addExptForm.value = item;
  addExptDialogVisible.value = true;
};
// 删除
const delExpt = (item) => {
  ElMessageBox.confirm("确定删除此实验？", "提示信息", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(async () => {
      // 调接口

      try {
        console.log("删除");
      } catch (error) {}
    })
    .catch((error) => {
      console.log(error);
      ElMessage({
        type: "info",
        message: "已取消",
      });
    });
};

onMounted(() => {
  getExptList();
});
const color = "#424242";
</script>
<style scoped lang="scss">
.expt-manage {
  width: 100%;
  height: 100%;

  display: flex;
  // border: 10px solid red;
  overflow: hidden;
  .expt-manage-left {
    width: 80%;
    box-sizing: border-box;
    height: 100%;
    // padding: 0 10px;

    .expt-list {
      height: calc(100% - 110px);

      .head {
        height: 40px;
        display: flex;
        justify-content: space-between;
        .left {
          display: flex;
          .tabs {
            height: 40px;
            display: flex;
            cursor: pointer;
            .tab-itme {
              width: 140px;
              height: 40px;
              line-height: 40px;
              text-align: center;
              background: #535f64;
              margin-right: 10px;
            }
            .active-tab {
              background: #518e8e;
            }
          }
          .search {
            display: flex;
            .el-select {
              width: 110px;
              :deep() {
                .el-select__wrapper {
                  height: 40px !important;
                  background: #575757;
                  border: none;
                  box-shadow: none;
                  border-bottom-right-radius: 0;
                  border-radius: 0;
                  border-right: 1px solid #575757;
                  .el-select__selected-item {
                    color: #fff !important;
                  }
                  .is-transparent {
                    color: #b9c4c4 !important;
                  }
                }
              }
            }

            :deep() {
            }
            .el-input__inner:focus {
              border-color: #00af3c;
            }
            .el-input {
              margin: 0 1px;
              width: 200px;

              :deep() {
                .el-input__wrapper {
                  height: 40px !important;
                  background: #424242;

                  // border: none;
                  box-shadow: none;
                  // box-shadow: 1px 1px 1px 1px  #424242,;
                  border-radius: 0;

                  border: 2px solid #575757;

                  .el-input__inner {
                    color: #fff;
                  }
                }
              }
            }
            .el-button {
              height: 40px;
              background: #575757;
              color: #fff;
              border-radius: 0;
              box-shadow: none;
              border: 0;
              &:hover {
                color: green;
              }
            }
          }
        }
        .right {
          width: 160px;
          height: 100%;
          background: #467574;
          text-align: center;
          line-height: 40px;
          border-radius: 5px;
          cursor: pointer;
        }
      }
      .card-list {
        margin-top: 10px;
        height: calc(100% - 50px);
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        overflow: hidden;
        overflow-y: auto;
        align-content: flex-start;

        .item {
          flex-shrink: 0;
          width: 230px;
          height: 40%;
          border: 1px solid green;
          flex-grow: 1;
          align-self: center;
        }
      }
    }
  }
}
:deep() {
  .addExptDialog {
    margin-top: 20px;
    background: #454545;
    padding: 0;
    .el-dialog__header {
      background: #777777;
      // padding: 0;
      text-align: center;
      .el-dialog__title {
        color: #fff;
        font-size: 18px;
      }
    }
    .content {
      padding: 20px 0 0 0;
      .el-input-number__decrease,
      .el-input-number__increase {
        background: transparent;
        color: #fff;
      }

      .demo-ruleForm {
        width: 80%;
        margin: 0 auto;
        .jobContent {
          margin-left: 10px;
          color: #fff;
        }

        .el-textarea__inner {
          background-color: #424242 !important;
          color: #fff;
        }
        // 表单
        .el-input {
          .el-input__wrapper {
            background-color: #424242 !important;
            .el-input__inner {
              color: #fff;
            }
            .el-input__count-inner {
              background: transparent;
              color: #fff;
            }
          }
        }

        .el-select {
          .el-select__wrapper {
            background-color: #424242;

            .el-select__selected-item {
              color: #fff !important;
            }
            .is-transparent {
              color: #9eaba7 !important;
            }
          }
        }
        .el-form-item__label {
          color: #fff;
        }
      }
    }
  }

  // 表格
  .el-table__expand-icon > .el-icon {
    display: none !important;
  }
  .el-loading-mask {
    background: transparent;
  }

  .el-table__header .cell {
    padding: 0 !important;
    text-overflow: unset !important;
    white-space: nowrap !important;
  }

  .cell:empty::after {
    content: "--" !important;
  }

  .el-table {
    border: none;
    --el-table-border-color: 0;

    font-size: 12px;

    // height: 94% !important;
  }

  .el-table--fit {
    background: transparent;
  }

  .el-table__inner-wrapper {
    // border: none;
  }

  .el-table tr {
    color: #fff;

    // background: #1e292b;
    background: #575757;
  }

  .cell {
    white-space: nowrap;
  }

  .el-table td.el-table__cell,
  .el-table th.el-table__cell.is-leaf {
    border: 1px solid #6a6a6a;
    padding: 5px;
  }

  .el-table--enable-row-hover .el-table__body tr:hover > td.el-table__cell {
    background: #121d1f;
  }

  .el-table--striped .el-table__body tr.el-table__row--striped td {
    background: rgba(255, 255, 255, 0.05);
  }
  .el-table__body tr.current-row > td {
    background-color: #15c0ff20 !important;
  }

  .el-scrollbar {
    // 横向滚动条
    .el-scrollbar__bar.is-horizontal .el-scrollbar__thumb {
      opacity: 1; // 默认滚动条自带透明度
      height: 8px; // 横向滑块的宽度
      border-radius: 2px; // 圆角度数
      // background-color: rgba(136, 219, 255, 1); // 滑块背景色
      background-color: #3f474d; // 滑块背景色
      box-shadow: 0 0 6px rgba(0, 0, 0, 0.15); // 滑块阴影
    }

    // 纵向滚动条
    .el-scrollbar__bar.is-vertical .el-scrollbar__thumb {
      opacity: 1;
      width: 8px; // 纵向滑块的宽度
      border-radius: 2px;
      // background-color: rgba(136, 219, 255, 1);
      background-color: #3f474d;
      box-shadow: 0 0 6px rgba(0, 0, 0, 0.15);
    }
  }
}
.dialog-footer {
  padding: 0 0 10px 0;
}
</style>
